const expect = require('chai').expect;
const G6 = require('../../src/');

const div = document.createElement('div');
div.id = 'issue-659';
document.body.appendChild(div);

const Util = G6.Util;
const data = {
  nodes: [{
    id: 'node1',
    x: 100,
    y: 100,
    shape: 'circle-animate',
    size: 20,
    label: '图形动画',
    labelCfg: {
      position: 'bottom'
    }
  }, {
    id: 'node2',
    x: 300,
    y: 200,
    shape: 'background-animate',
    color: '#b5b5b5',
    size: 20,
    label: '背景动画',
    labelCfg: {
      position: 'bottom'
    }
  }, {
    id: 'node3',
    x: 400,
    y: 100,
    size: [ 40, 40 ],
    shape: 'inner-animate',
    img: '',
    label: 'rect',
    labelCfg: {
      position: 'bottom'
    }
  }, {
    id: 'node4',
    x: 300,
    y: 400,
    shape: 'rect',
    label: 'rect',
    labelCfg: {
      position: 'bottom'
    }
  }],
  edges: [
    {
      source: 'node1',
      target: 'node2'
    },
    {
      source: 'node3',
      target: 'node2'
    },
    {
      source: 'node2',
      target: 'node4'
    }
  ] };

// 放大、变小动画
G6.registerNode('circle-animate', {
  afterDraw(cfg, group) {
    const shape = group.get('children')[0];
    shape.animate({
      repeat: true,
      onFrame(ratio) {
        const diff = ratio <= 0.5 ? ratio * 10 : (1 - ratio) * 10;
        return {
          r: cfg.size / 2 + diff
        };
      }
    }, 3000, 'easeCubic');
  }
}, 'circle');

G6.registerNode('background-animate', {
  afterDraw(cfg, group) {
    const r = cfg.size / 2;
    const back1 = group.addShape('circle', {
      zIndex: -3,
      attrs: {
        x: 0,
        y: 0,
        r,
        fill: cfg.color,
        opacity: 0.6
      }
    });
    const back2 = group.addShape('circle', {
      zIndex: -2,
      attrs: {
        x: 0,
        y: 0,
        r,
        fill: cfg.color, // 为了显示清晰，随意设置了颜色
        opacity: 0.6
      }
    });

    const back3 = group.addShape('circle', {
      zIndex: -1,
      attrs: {
        x: 0,
        y: 0,
        r,
        fill: cfg.color,
        opacity: 0.6
      }
    });
    group.sort(); // 排序，根据zIndex 排序
    back1.animate({ // 逐渐放大，并消失
      r: r + 10,
      opacity: 0.1,
      repeat: true // 循环
    }, 3000, 'easeCubic', null, 0); // 无延迟

    back2.animate({ // 逐渐放大，并消失
      r: r + 10,
      opacity: 0.1,
      repeat: true // 循环
    }, 3000, 'easeCubic', null, 1000); // 1 秒延迟

    back3.animate({ // 逐渐放大，并消失
      r: r + 10,
      opacity: 0.1,
      repeat: true // 循环
    }, 3000, 'easeCubic', null, 2000); // 2 秒延迟
  }
}, 'circle');

G6.registerNode('inner-animate', {
  afterDraw(cfg, group) {
    const size = cfg.size;
    const width = size[0] - 12;
    const height = size[1] - 12;
    const image = group.addShape('image', {
      attrs: {
        x: -width / 2,
        y: -height / 2,
        width,
        height,
        img: cfg.img
      }
    });
    image.animate({
      onFrame(ratio) {
        const matrix = Util.mat3.create();
        const toMatrix = Util.transform(matrix, [
          [ 'r', ratio * Math.PI * 2 ]
        ]);
        return {
          matrix: toMatrix
        };
      },
      repeat: true
    }, 3000, 'easeCubic');
  }
}, 'rect');
G6.Global.nodeStateStyle.hover = {
  stroke: '#d9d9d9',
  fill: '#5394ef'
};
const graph = new G6.Graph({
  container: 'issue-659',
  width: 1000,
  height: 600,
  modes: {
    default: [ 'drag-canvas', 'drag-node', 'zoom-canvas', 'click-select' ]
  }
});
graph.data(data);
graph.render();

graph.on('node:mouseenter', ev => {
  const { item } = ev;
  graph.setItemState(item, 'hover', true);
});
graph.on('node:mouseleave', ev => {
  const { item } = ev;
  graph.setItemState(item, 'hover', false);
});

describe('#659', () => {
  const node = graph.findById('node1');
  const keyShape = node.getKeyShape();
  graph.emit('node:mouseenter', { item: node });
  expect(keyShape.attr('fill')).to.equal('#5394ef');
  expect(keyShape.attr('stroke')).to.equal('#d9d9d9');
  graph.emit('node:dragstart', { item: node, x: 200, y: 200 });
  graph.emit('node:dragend', { item: node, x: 500, y: 500 });
  expect(node.get('model').x).to.equal(400);
  expect(node.get('model').y).to.equal(400);
  expect(keyShape.attr('fill')).to.equal('#5394ef');
  expect(keyShape.attr('stroke')).to.equal('#d9d9d9');
  graph.emit('node:mouseleave', { item: node });
  expect(keyShape.attr('fill')).to.equal('#fff');
  expect(keyShape.attr('stroke')).to.equal('#333');
});
